import { createStore, Store, useStore as useVuexStore } from 'vuex';

import loginModule from './login/login';
import systemModule from './main/system/system';
import commonModule from './main/common/common';
import dashBoardModule from './main/analysis/dashboard';
import { requestPageListData } from '@/service/main/system/system';

import type { IRootState, IStoreType } from './types';

const store = createStore<IRootState>({
  state() {
    return {
      name: 'red',
      age: 18,
      height: 1.88, // 可以加上interface没有指定的键,但是真正不能使用.
      departmentList: [],
      roleList: [],
      menuList: []
    };
  },
  getters: {
    getName(state) {
      state.name;
    }
  },
  mutations: {
    changeDepartmentList(state, list: any[]) {
      state.departmentList = list;
    },
    changeRoleList(state, list: any[]) {
      state.roleList = list;
    },
    changeMenuList(state, list: any[]) {
      state.menuList = list;
    }
  },
  actions: {
    // 获取department与role列表
    async getDepartmentAndRoleListAction({ commit }) {
      // 发送请求获取departmentList
      const departmentResult = await requestPageListData('/department/list', {
        offset: 0,
        size: 1000
      });
      // 发送请求获取roleList
      const roleResult = await requestPageListData('/role/list', {
        offset: 0,
        size: 1000
      });
      // 发送请求获取menuList
      const menuResult = await requestPageListData('/menu/list', {
        offset: 0,
        size: 1000
      });
      // 储存在根store里面,非常公共的,很少变化的.
      const departmentList = departmentResult.data.list;
      const roleList = roleResult.data.list;
      const menuList = menuResult.data.list;
      commit('changeDepartmentList', departmentList);
      commit('changeRoleList', roleList);
      commit('changeMenuList', menuList);
    }
  },
  modules: {
    loginModule,
    systemModule,
    commonModule,
    dashBoardModule
  }
});

// 每次刷新vuex中的数据(在内存中)都会消失. 如从login跳到main, login页面的时候vuex是有数据的. 跳到main页面的时候再刷新vuex就没有数据了, 但是我们确确实实是登入过的,我们是用localStorage判断是否登入.
// 在最外面的main调用这个方法,不管在哪个页面都会使用到这个方法.
export function setupStore() {
  store.dispatch('loginModule/loadLocalLoginData');
  // store.dispatch('getDepartmentAndRoleListAction'); // 已被放在store.login.action.accountLoginAction
}

// 使用这个函数依然是在使用vuex的useStore, 但是我们可以指定你能使用什么不能使用什么. useStore.sth.sth
// 例如 const userMenu = store.state.loginModule.userMenu; // 从vuex拿到一个数组, 左边menu需要展示的数据
export function useStore(): Store<IStoreType> {
  return useVuexStore();
}

export default store;
